<template>
	<div class="app-container">
		<div class="details">
			<div class="detailsDiv">
				<div class="dialogDom">
					<div><span>昵称:</span>{{ detailsInfo.nikename }}</div>
					<div><span>注册IP:</span>{{ detailsInfo.registerIp }}</div>
					<div><span>注册地址:</span>暂无</div>
					<div><span>注册时间:</span>{{ detailsInfo.registerTime }}</div>
				</div>

				<div class="dialogDom">
					<div><span>ID:</span>{{ detailsInfo.userId }}</div>
					<div><span>实名状态:</span>{{ detailsInfo.realStatus == 0 ? '未认证' : '已认证' }}</div>
					<div><span>认证方式:</span>暂无</div>
					<div><span>账号类型:</span>{{ detailsInfo.userTypeDesc }}</div>
				</div>
				<div class="dialogDom">
					<div><span>姓名:</span>{{ detailsInfo.name || '-' }}</div>
					<div><span>手机号码:</span>{{ detailsInfo.mobile || '-' }}</div>
					<div><span>性别:</span>{{ detailsInfo.sexDesc }}</div>
					<div><span>账号状态:</span>{{ detailsInfo.statusDesc }}</div>
				</div>
			</div>
			<div class="detailsDiv">
				<div class="dialogDom">
					<div><span>粉丝总数:</span>{{ detailsInfo.fansCount | 0 }}</div>
					<div><span>关注总数:</span>{{ detailsInfo.focusCount | 0 }}</div>
					<div><span>获赞总数:</span>{{ detailsInfo.likeCount | 0 }}</div>
					<div><span>作品总数:</span>{{ detailsInfo.workCount | 0 }}</div>
				</div>
				<div class="dialogDom">
					<div><span>账户总额:</span>{{ detailsInfo.shareCount | 0 }}</div>
				</div>
			</div>

			<div class="detailsDiv">
				<el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
					<el-tab-pane label="文章作品" name="article">
						<el-table v-loading="loading" :data="tableData" border style="width: 100%">
							<el-table-column prop="id" label="文章ID" width="180" align="center"> </el-table-column>
							<el-table-column prop="title" label="文章标题" width="600" align="center" />
							<el-table-column prop="categoryidDesc" label="文章类型" width="120" align="center" />
							<el-table-column prop="originalUrl" label="地址" width="455" align="center">
								<!-- <template #default="scope">
									<a :href="scope.row.link" target="_blank">{{ scope.row.link }}</a>
								</template> -->
							</el-table-column>
							<!-- <el-table-column prop="publishTime" label="发布时间" /> -->
							<el-table-column prop="publisherIp" label="发布IP" width="180" align="center" />

							<el-table-column prop="publishStatusDesc" label="文章状态" width="120" align="center" />
							<el-table-column prop="auditStatusDesc" label="监控状态" width="120" align="center" />
							<el-table-column prop="riskLevelDesc" label="风险等级" width="120" align="center" />
							<el-table-column prop="likeCount" label="点赞" width="120" align="center" />
							<el-table-column prop="shareCount" label="转发" width="120" align="center" />
							<el-table-column prop="commentCount" label="评论" width="120" align="center" />
							<el-table-column prop="updateTime" label="最后修改时间" width="180" align="center" />
							<el-table-column prop="auditTime" label="审核通过时间" width="180" align="center" />
							<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">
								<template #default="scope">
									<el-button link icon="" @click="userDetails(scope.row, 'article')" type="primary"> 详情 </el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-tab-pane>
					<el-tab-pane label="视频作品" name="videoWorks">
						<el-table v-loading="loading" :data="tableData" border style="width: 100%">
							<el-table-column prop="id" label="视频ID" width="180" align="center"> </el-table-column>
							<el-table-column prop="title" label="视频标题" width="600" align="center" />
							<el-table-column prop="category" label="视频类型" width="120" align="center" />
							<el-table-column prop="originalUrl" label="地址" width="455" align="center">
								<!-- <template #default="scope">
									<a :href="scope.row.link" target="_blank">{{ scope.row.link }}</a>
								</template> -->
							</el-table-column>
							<!-- <el-table-column prop="publishTime" label="发布时间" /> -->
							<el-table-column prop="publisherIp" label="发布IP" width="180" align="center" />

							<el-table-column prop="publishStatusDesc" label="视频状态" width="120" align="center" />
							<el-table-column prop="auditStatusDesc" label="监控状态" width="120" align="center" />
							<el-table-column prop="riskLevelDesc" label="风险等级" width="120" align="center" />
							<el-table-column prop="likeCount" label="点赞" width="120" align="center" />
							<el-table-column prop="shareCount" label="转发" width="120" align="center" />
							<el-table-column prop="commentCount" label="评论" width="120" align="center" />
							<el-table-column prop="publishTime" label="最后修改时间" width="180" align="center" />
							<el-table-column prop="auditTime" label="审核通过时间" width="180" align="center" />
							<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">
								<template #default="scope">
									<el-button link icon="" @click="userDetails(scope.row, 'videoWorks')" type="primary"> 详情 </el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-tab-pane>

					<el-tab-pane label="粉丝列表" name="2">
						<el-table v-loading="loading" :data="tableData" border style="width: 100%">
							<el-table-column prop="avartarUrl" label="用户信息" width="300" align="center">
								<template #default="scope">
									<div class="avartar">
										<img class="avartarUrl" :src="scope.row.avartarUrl" alt="" />
										<div>
											<div>{{ scope.row.nikename }}</div>
											<div>{{ scope.row.id }}</div>
										</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="intro" label="用户简介" width="800" align="center" />
							<el-table-column prop="fansCount" label="粉丝数量" min-width="120" align="center" />
							<el-table-column prop="focusCount" label="关注数量" min-width="120" align="center" />
							<el-table-column prop="createTime" label="关注时间" min-width="180" align="center" />
						</el-table>
					</el-tab-pane>
					<el-tab-pane label="关注列表" name="1">
						<el-table v-loading="loading" :data="tableData" border style="width: 100%">
							<el-table-column prop="avartarUrl" label="用户信息" width="300" align="center">
								<template #default="scope">
									<div class="avartar">
										<img class="avartarUrl" :src="scope.row.avartarUrl" alt="" />
										<div>
											<div>{{ scope.row.nikename }}</div>
											<div>{{ scope.row.id }}</div>
										</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="intro" label="用户简介" width="800" align="center" />
							<el-table-column prop="fansCount" label="粉丝数量" min-width="120" align="center" />
							<el-table-column prop="focusCount" label="关注数量" min-width="120" align="center" />
							<el-table-column prop="createTime" label="关注时间" min-width="180" align="center" />
						</el-table>
					</el-tab-pane>
					<el-tab-pane label="浏览历史" name="browsingHistory">
						<el-table v-loading="loading" :data="tableData" border style="width: 100%">
							<el-table-column prop="title" label="资源标题" width="300" align="center"> </el-table-column>
							<el-table-column prop="shareUrl" label="资源链接" width="800" align="center" />
							<el-table-column prop="epCurrent" label="当前（章节、集数）数" min-width="180" align="center" />
							<el-table-column prop="readPercent" label="阅读进度百分比" min-width="180" align="center" />
							<el-table-column prop="updateTime" label="操作时间" min-width="180" align="center" />
						</el-table>
					</el-tab-pane>
					<el-tab-pane label="举报列表" name="reportListPage">
						<el-table v-loading="loading" :data="tableData" border style="width: 100%">
							<el-table-column prop="contentTitle" label="标题" min-width="300" align="center"> </el-table-column>
							<el-table-column prop="reportedTypeDesc" label="举报类型" min-width="150" align="center" />
							<el-table-column prop="reportReason" label="举报原因描述" min-width="800" align="center" />
							<el-table-column prop="reportCount" label="举报人数" min-width="150" align="center" />
							<el-table-column prop="reportTime" label="举报时间" min-width="150" align="center" />
						</el-table>
					</el-tab-pane>
					<el-tab-pane label="账号违规信息" name="auditRecord">
						<el-table v-loading="loading" :data="tableData" border style="width: 100%">
							<el-table-column prop="content" label="内容" min-width="300" align="center"> </el-table-column>
							<el-table-column prop="dataTypeDesc" label="违规类型" min-width="150" align="center" />
							<el-table-column prop="auditResultDesc" label="违规原因描述" min-width="150" align="center" />
							<el-table-column prop="link" label="违规链接" min-width="800" align="center" />
							<el-table-column prop="createTime" label="违规时间" min-width="150" align="center" />
						</el-table>
					</el-tab-pane>
					<el-tab-pane label="操作历史" name="userHistory">
						<el-table v-loading="loading" :data="tableData" border style="width: 100%">
							<el-table-column prop="title" label="标题" min-width="300" align="center"> </el-table-column>
							<el-table-column prop="actionType" label="操作类型" min-width="150" align="center" />
							<el-table-column prop="shareUrl" label="链接" min-width="800" align="center" />
							<el-table-column prop="actionTime" label="操作时间" min-width="150" align="center" />
						</el-table>
					</el-tab-pane>
				</el-tabs>
				<el-pagination class="paginationdDom" background @size-change="handleSizeChange"
					@current-change="handleCurrentChange" :current-page="queryParams.current" :page-size="queryParams.size"
					:layout="layout" :total="total">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
import {
	getAppUserInfo,
	getUserFollowList,
	videoPage,
	articlePage,
	getPreviewUserPageByUserId,
	getUserReportListPage,
	getUserHistory,
} from '/@/api/admin/content';
import { auditRecordPage } from '/@/api/admin/monitor';
import { useMessage } from '/@/hooks/message';
export default {
	name: 'Online',
	data() {
		return {
			layout: 'total, sizes, prev, pager, next, jumper',
			outerVisible: false,
			activeName: 'article',
			// 遮罩层
			loading: true,
			// 总条数
			total: 0,
			// 查询参数
			detailsInfo: {},
			queryParams: {
				current: 1,
				size: 10,
			},
			tableData: [],
		};
	},

	created() {
		this.getAppUserInfo();
	},
	methods: {
		handleClick(tab, event) {
			this.queryParams = this.$options.data().queryParams;
			this.tableData = [];
			this.loading = true;
			this.activeName = tab.props.name;
			this.queryParams.size = 10;
			this.queryParams.current = 1;
			if (this.activeName == 1 || this.activeName == 2) {
				this.getUserFollowList();
			}
			if (this.activeName == 'article') {
				this.articlePage();
			}
			if (this.activeName == 'videoWorks') {
				this.videoPage();
			}
			if (this.activeName == 'browsingHistory') {
				this.getPreviewUserPageByUserId();
			}
			if (this.activeName == 'reportListPage') {
				this.getUserReportListPage();
			}
			if (this.activeName == 'userHistory') {
				this.userHistory();
			}
			if (this.activeName == 'auditRecord') {
				this.auditRecordPage()
			}
		},
		getAppUserInfo() {
			let data = {
				id: this.$route.query.id,
				userId: this.$route.query.userId,
			};
			getAppUserInfo(data).then((res) => {
				this.detailsInfo = res.data;
				this.articlePage();
			});
		},
		getUserFollowList() {
			this.queryParams.queryType = this.activeName;
			getUserFollowList(this.queryParams).then((res) => {
				this.tableData = res.data.records;
				this.total = res.data.total;
				this.loading = false;
			});
		},
		articlePage() {
			this.queryParams.userId = this.$route.query.id;
			// this.queryParams.userId='287692411165212672'
			this.queryParams.needBizCountFlag = true;
			articlePage(this.queryParams).then((res) => {
				this.tableData = res.data.records;
				this.total = res.data.total;
				this.loading = false;
			});
		},
		auditRecordPage() {
			this.queryParams.userId = this.$route.query.id;
			this.queryParams.auditStatus = 'rejected';
			auditRecordPage(this.queryParams).then((res) => {
				this.tableData = res.data.records;
				this.total = res.data.total;
				this.loading = false;
			});
		},
		videoPage() {
			this.queryParams.userId = this.$route.query.id;
			// this.queryParams.userId='241261640027209728'
			this.queryParams.needBizCountFlag = true;
			videoPage(this.queryParams).then((res) => {
				this.tableData = res.data.records;
				this.total = res.data.total;
				this.loading = false;
			});
		},
		getPreviewUserPageByUserId() {
			this.queryParams.userId = this.$route.query.id;
			getPreviewUserPageByUserId(this.queryParams).then((res) => {
				this.tableData = res.data.records;
				this.total = res.data.total;
				this.loading = false;
			});
		},
		getUserReportListPage() {
			this.queryParams.userId = this.$route.query.id;
			getUserReportListPage(this.queryParams).then((res) => {
				this.tableData = res.data.records;
				this.total = res.data.total;
				this.loading = false;
			});
		},
		userHistory() {
			this.queryParams.userId = this.$route.query.id;
			getUserHistory(this.queryParams).then((res) => {
				this.tableData = res.data.records;
				this.total = res.data.total;
				this.loading = false;
			});
		},
		handleSizeChange(val) {
			this.loading = true;
			this.queryParams.size = val;
			this.queryParams.current = 1; //调整每页数目时，重置当前页，避免当前显示在不存在的页数
			if (this.activeName == 1 || this.activeName == 2) {
				this.getUserFollowList();
			}
			if (this.activeName == 'article') {
				this.articlePage();
			}
			if (this.activeName == 'videoWorks') {
				this.videoPage();
			}
			if (this.activeName == 'browsingHistory') {
				this.getPreviewUserPageByUserId();
			}
			if (this.activeName == 'reportListPage') {
				this.getUserReportListPage();
			}
			if (this.activeName == 'userHistory') {
				this.userHistory();
			}
		},
		userDetails(row) {
			if (this.activeName == 'videoWorks') {
				this.$router.push({ path: '/shortVideo/details/index', query: { id: row.id, userId: row.userId } });
			} else {
				this.$router.push({ path: '/article/details/index', query: { id: row.id, userId: row.userId } });
			}
		},
		// 更改当前页
		handleCurrentChange(val) {
			this.loading = true;
			this.queryParams.current = val;
			if (this.activeName == 1 || this.activeName == 2) {
				this.getUserFollowList();
			}
			if (this.activeName == 'videoWorks') {
				this.getAuthorWorksPage();
			}
			if (this.activeName == 'browsingHistory') {
				this.getPreviewUserPageByUserId();
			}
			if (this.activeName == 'reportListPage') {
				this.getUserReportListPage();
			}
			if (this.activeName == 'userHistory') {
				this.userHistory();
			}
		},
	},
};
</script>
<style lang="scss" scoped>
.details {
	font-size: 14px;
	color: #666;
	width: 98%;
	margin: 1% auto;
}

.detailsDiv {
	border-bottom: 1px solid #e3e3e3;
	margin-bottom: 0.5%;
	padding: 10px 20px;
	background-color: #fff;
	font-size: 16px;
}

.dialogDom {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
	margin: 15px 0;
	color: #999;
	flex-wrap: wrap;

	span {
		color: #333;
		margin-right: 10px;
	}

	>div {
		width: 25%;
		min-width: 200px;
	}
}

.dialogDiv {
	margin: 15px 0;
	color: #999;
	margin: 15px 0;
	color: #999;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;

	.dialogDivCon {
		width: 70%;

		a {
			text-decoration: underline;
		}
	}

	span {
		color: #333;
		margin-right: 10px;
	}
}

.imgPics {
	width: 18%;
	display: inline-block;
	margin: 1%;

	img {
		width: 100%;
		display: block;
	}
}

.avartar {
	display: flex;

	.avartarUrl {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-right: 10px;
	}
}
</style>
